<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/hqGoods'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="商品分类：">
                        <el-cascader
                        clearable
                        style="width:200px"
                        v-model="paging.cate_id"
                        :options="classList"
                        placeholder="请选择商品分类"
                        :props="{emitPath:false, expandTrigger: 'hover',children:'child',value:'id',label:'title'}"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品状态：">
                        <el-select style="width:200px" clearable v-model="paging.status" placeholder="请选择">
                            <el-option label="上架" :value="1"> </el-option>
                            <!-- <el-option label="未上架" value="2"> </el-option> -->
                            <el-option label="下架" :value="0"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                     <el-form-item label="商品ID：">
                        <el-input style="width:200px" clearable v-model="paging.goods_id"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称：">
                        <el-input style="width:200px" clearable v-model="paging.title"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <!-- <div class="title-left"> 分销列表 </div> -->
                    <el-button icon="el-icon-plus" @click="utils.goUrl('/zogoodsInfo?title=添加')" style="margin-left:auto;" type="primary">新增</el-button>
                    <!-- <el-button icon="el-icon-download" :loading="isDerive" @click="derive">导出</el-button> -->
                    <!-- <el-button type="success" plain>批量上架</el-button> -->
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column label="商品分类" >
                         <template slot-scope="scope">
                            <span v-if="scope.row.cate">{{scope.row.cate.title}}</span>
                        </template>
                     </el-table-column>
                     <el-table-column prop="id" label="商品ID" > </el-table-column>
                    <el-table-column prop="title" label="商品名称" > </el-table-column>
                    <el-table-column label="商品规格" width="200">
                        <template slot-scope="scope" v-if="scope.row.sku.length">
                            <span>{{scope.row.sku[0].sku_text}}</span>
                        </template>    
                     </el-table-column>
                    <el-table-column prop="sku[0]" label="标准价（元）" >
                        <template slot-scope="scope" v-if="scope.row.sku.length">
                        {{scope.row.sku[0].sale_price}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="create_time" label="累计上架" > </el-table-column> -->
                    <!-- <el-table-column prop="create_time" label="累计上架" > </el-table-column> -->
                    <!-- <el-table-column prop="sale_volume" label="累计销量"> </el-table-column> -->
                    <el-table-column prop="stock" label="库存数量" >
                        <template slot-scope="scope" v-if="scope.row.sku.length">
                            {{scope.row.sku[0].stock | inventoryWarning(scope.row.stock_warning)}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="商品图片" min-width="130">
                        <template slot-scope="scope">
                            <el-image class="image-thumbnail" :src="scope.row.picture[0]" fit="cover" :preview-src-list="scope.row.picture" > </el-image>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="商品状态"> 
                         <template slot-scope="scope" >
                            <span >{{scope.row.status | typeName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(1,scope.row)" class="tab-table-text">查看</span>
                            <span  @click="setRow(3,scope.row)" class="tab-table-text">编辑</span>
                            <span v-if="scope.row.status == 1" @click="setRow(2,scope.row)" class="tab-red-text">下架</span>
                            <span v-else @click="setRow(2,scope.row)" class="tab-lv-text">上架</span>
                            <span @click="setRow(4, scope.row)" class="tab-red-text">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="分销记录" :visible.sync="isInfo">
            <!-- width="570px" -->
            <el-table :data="recordList" v-loading="loading2" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="company.title" label="公司名称"> </el-table-column>
                <el-table-column prop="create_time" label="邀请时间"> </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            isDerive:false,
            paging: {
                goods_id: '',//商品id 用于筛选
                store_id:0,
                cate_id:'',
                status:'',
                title:'',
                page: 1,
                total: 0,
                limit: 10,
            },

            form: {
                date: "",
            },
            classList:[],
            shopList:[],
            tableData: []
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 0:
                    val = '下架'
                    break;
                case 1:
                    val = '上架'
                    break;
            }
            return val;
        }
    },
    created() {
        if (this.$route.path == '/hqGoods') {
            this.handleCurrentChange(1);
            this.getGoodsCategory();
            this.homegetStore();
        }
    },
    methods: {
        derive(){

        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        async getGoodsCategory(){
            let {code,data} = await this.$Http.getGoodsCategory({limit:10000});
            if(code){
                data.data.forEach(v=>{
                    if(!v.child.length)delete v.child
                })
                this.classList = data.data;
                // console.log(this.classList,'this.classList');
            }
        },
        async setRow(type, row) {
            if(type==1){
                this.utils.goUrl(`/zogoodsInfo?title=详情&id=${row.id}`);

            }else if(type==3){
                this.utils.goUrl(`/zogoodsInfo?title=修改&id=${row.id}`);
            }else if(type==2){
                if(this.isBtn)return;
                this.isBtn = true;
                let {code,data} = await this.$Http.changeGoods({
                    field:'status',
                    value:row.status==1?0:1,
                    id:row.id
                })
                this.isBtn = false;
                if(code){
                    this.$message.success(row.status==1?'下架成功':'上架成功');
                    // this.handleCurrentChange(1);
                    row.status=row.status==1?0:1;
                }
            }else{
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该商品吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.delGoods({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
            return;
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getGoods(this.paging);
            this.loading = false;
            if (code) {
                data.data.forEach((ele,index)=>{
                    if(ele.picture){
                        let img = ele.picture.split(',')
                        ele.picture = img
                    }
                })
                this.tableData = data.data;
                 console.log(this.tableData,"this.tableData")
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>